<div class="row work-shop-proc">
  <div class="col-md-3 pr-0">
    <div style="padding: 10px">
      
      <div>
        <h4 style="height: 30px">基础信息</h4>
        <div class="proc-info-item">
          <span class="m-badge m-badge--success">任务</span>
          <code>{{ procInfo.subTaskCode }}</code>
        </div>
        <div class="proc-info-item">
          <span class="m-badge m-badge--success">图号</span>
          <code>{{ procInfo.drawingCode }}</code>
        </div>

        <div class="proc-info-item">
          <span class="m-badge m-badge--success">名称</span>
          <code>{{ procInfo.taskName }}</code>
        </div>

        <div class="proc-info-item">
          <span class="m-badge m-badge--success">数量</span>
          <code>{{ procInfo.amountPlanned }}</code>
        </div>

        <div class="proc-info-item">
          <span class="m-badge m-badge--success">工艺</span>
          <code>{{ procInfo.techDocCode }}</code>
        </div>

        <div class="proc-info-item">
          <span class="m-badge m-badge--success">质控</span>
          <code>{{ procInfo.zhiKongKaNo }}</code>
        </div>

       
      </div>
    </div>
  </div>

  <div class="col-md-9 pl-0">
    <div style="padding: 10px">
      <div class="alert alert-info">
        <div class="row">
          <div class="col-lg-6">
            <div class="note note-success" style="padding: 11px">
              <h5 class="block">工序状态:</h5>
              <em>{{ procInfo.statusName }}</em>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="note note-success" style="padding: 11px;">
                <h5 class="block">是否外协:</h5>
                <p-checkbox [(ngModel)]="checked" [binary]='true' name="checked"></p-checkbox>
            </div>
          </div>
        </div>
      </div>

      <div class="row" style="margin-top: 40px; margin-bottom: 30px">
        <div class="col-md-12">
          <div
            class="m-btn-group m-btn-group--pill btn-group"
            role="group"
            aria-label="..."
            style="width: 100%"
          >
            <button
              type="button"
              class="m-btn btn btn-outline-info"
              style="width: 30%"
              (click)="start()"
              [disabled]="
                procInfo.statusName !== '初始' && procInfo.statusName !== '暂停'
              "
            >
              <i class="fa fa-play"></i>开 始
            </button>
            <button
              type="button"
              class="m-btn btn btn-outline-danger"
              style="width: 30%"
              (click)="pause()"
              [disabled]="procInfo.statusName !== '进行'"
            >
              <i class="fa fa-pause"></i>暂 停
            </button>
            <button
              type="button"
              class="m-btn btn btn-outline-success"
              style="width: 30%"
              (click)="finish()"
              [disabled]="procInfo.statusName !== '进行'"
            >
              <i class="fa fa-step-forward"></i>完 成
            </button>
            <button
              type="button"
              class="m-btn btn btn-outline-default"
              style="width: 10%; padding: 0"
              (click)="restart()"
              [disabled]="procInfo.statusName == '初始'"
              
            >
              <i class="fa fa-refresh"></i>重 置
            </button>
          </div>
        </div>
      </div>
      
      <div class="row" *ngIf="checked==false">
        <div class="col-md-12">
          <div *ngIf="nodeWorker.length != 0" style="margin-bottom: 20px">
            <p-table
              [value]="nodeWorker"
              [paginator]="true"
              [rows]="5"
              class="gxzxu"
            >
              <ng-template pTemplate="header">
                <tr style="border: 1px solid #cdcdcd; height: 40px">
                  <th style="width: 2em"></th>
                  <th>人员姓名</th>
                  <th>已分配工时</th>
                  <th>时间</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-rowData let-ri="rowIndex">
                <tr
                  style="
                    border: 1px solid #cdcdcd;
                    border-top: none;
                    height: 40px;
                  "
                >
                  <td></td>
                  <td>{{ rowData.userName.name }}</td>
                  <td>{{ rowData.personWorkingTime }}</td>
                  <td>{{ rowData.createTime | momentFormat: "YYYY-MM-DD" }}</td>
                </tr>
              </ng-template>
            </p-table>
          </div>

          <p-table
            [value]="newnodeWorker"
            [paginator]="true"
            [rows]="5"
            class="gxzxu"
          >
            <ng-template pTemplate="caption"> 人员及工时分配 </ng-template>
            <ng-template pTemplate="header">
              <tr>
                <th
                  style="
                    width: 2em;
                    border-left: 1px solid #cdcdcd;
                    border-bottom: 1px solid #cdcdcd;
                  "
                ></th>
                <th
                  style="
                    height: 40px;
                    border-right: 1px solid #cdcdcd;
                    border-bottom: 1px solid #cdcdcd;
                  "
                >
                  人员姓名
                </th>
                <th
                  style="
                    height: 40px;
                    border-right: 1px solid #cdcdcd;
                    border-bottom: 1px solid #cdcdcd;
                  "
                >
                  分配工时
                </th>
                <th
                  style="
                    height: 40px;
                    border-right: 1px solid #cdcdcd;
                    width: 5em;
                    border-bottom: 1px solid #cdcdcd;
                  "
                >
                  操作
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-ri="rowIndex">
              <tr>
                <td
                  style="
                    height: 36px;
                    border-left: 1px solid #cdcdcd;
                    border-bottom: 1px solid #cdcdcd;
                  "
                ></td>
                <td
                  pEditableColumn
                  style="
                    border-right: 1px solid #cdcdcd;
                    border-bottom: 1px solid #cdcdcd;
                  "
                >
                  <p-cellEditor>
                    <ng-template pTemplate="input">
                      <p-dropdown
                        [options]="users"
                        [(ngModel)]="rowData.userName"
                        [style]="{ width: '100%' }"
                        optionLabel="name"
                        [filter]="true"
                        [showClear]="true"
                        name="userName"
                      ></p-dropdown>
                    </ng-template>
                    <ng-template pTemplate="output">
                      {{ rowData.userName.name }}
                    </ng-template>
                  </p-cellEditor>
                </td>
                <td
                  pEditableColumn
                  style="
                    border-right: 1px solid #cdcdcd;
                    border-bottom: 1px solid #cdcdcd;
                  "
                >
                  <p-cellEditor>
                    <ng-template pTemplate="input">
                      <p-spinner
                        size="55"
                        [step]="0.25"
                        (keyup)="jisuan()"
                        [(ngModel)]="rowData.personWorkingTime"
                        [min]="0"
                        name="personWorkingTime"
                        [inputStyle]="{
                          width: '300px'
                        }"
                      ></p-spinner>
                    </ng-template>
                    <ng-template pTemplate="output">
                      {{ rowData.personWorkingTime }}
                    </ng-template>
                  </p-cellEditor>
                </td>
                <td
                  style="
                    border-right: 1px solid #cdcdcd;
                    border-bottom: 1px solid #cdcdcd;
                  "
                >
                  <button
                    pButton
                    type="button"
                    pInitEditbaleRow
                    icon="pi pi-times"
                    class="ui-button-danger"
                    (click)="onRowEditInit(ri)"
                  ></button>
                </td>
              </tr>
            </ng-template>
            <ng-template pTemplate="summary" let-rowData>
              <div style="text-align: left">
                <button
                  type="button"
                  pButton
                  icon="fa fa-plus"
                  (click)="showDialogToAdd()"
                  label="新增"
                ></button>
                <button
                  type="button"
                  pButton
                  icon="fa fa-save"
                  (click)="save()"
                  label="保存"
                  [disabled]="ishavevalue == false"
                  style="
                    margin-left: 15px;
                    background-color: #34bfa3;
                    border: solid 1px #34bfa3;
                  "
                ></button>
              </div>
            </ng-template>
          </p-table>
        </div>
        <div class="col-md-12" style="margin-top: 15px; font-weight: bold">
          <span
            >当前工序总工时：{{
              totalProcWorkingTime * procInfo.amountPlanned
            }}</span
          >
          <span style="margin-left: 15px"
            >当前已分配工时：{{ userworkingtimestring }}</span
          >
          <span style="margin-left: 15px"
            >当前剩余工时：{{
              totalProcWorkingTime * procInfo.amountPlanned - userworkingtime
            }}</span
          >
        </div>
      </div>
    </div>
  </div>
</div>
